<div class="layui-body">
    <div style="padding: 16px;">
        <blockquote class="layui-elem-quote layui-text">
            我的个人资料（用户名不可修改）
        </blockquote>
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" autocomplete="off" value="" class="layui-input" placeholder="用户名不可修改" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" id="phone" value="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电子邮箱</label>
                <div class="layui-input-inline">
                    <input type="email" name="email" id="email" value="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片地址</label>
                <div class="layui-input-block">
                    <input type="longtext" id="imgurl" name="imgurl" value="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 上传头像
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="avatarImg" style="width: 100%; height: 92px;">
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="demo2">更新</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>
<script>
    var i1 = document.getElementById("username");
    var i2 = document.getElementById("phone");
    var i3 = document.getElementById("email");
    var i4 = document.getElementById("imgurl");
    fetch('/admin/api/userdata.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: 'username=<?php echo $_SESSION['username']; ?>'
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            i1.value = data[0].username;
            i2.value = data[0].phone;
            i3.value = data[0].email;
            i4.value = data[0].imgurl;
            document.getElementById("avatarImg").setAttribute('src',data[0].imgurl);
        })
        .catch(error => {
            console.log(error);
        });
    layui.use(function() {
        var upload = layui.upload;
        var layer = layui.layer;
        // 渲染
        upload.render({
            elem: '#ID-upload-demo-btn', // 绑定多个元素
            url: '<?=getUrl('api','upload','index')?>', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            dataType: 'json',
            data: {
                mode: 'layui',
            },
            size:48828,
            done: function(res, index, upload) {
                if (res.cod = 1) {
                    layer.msg('上传成功');
                    console.log(res);

                    var textbox = document.getElementById("imgurl");
                    textbox.value = res.data.src;
                    var textbox = document.getElementById("avatarImg");
                    textbox.src = res.data.src;
                } else {
                    layer.msg('上传失败');
                }
            }
        });
    });
    layui.use(['form'], function() {
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo2)', function(data) {
            var field = data.field; // 获取表单字段值
            var username = field.username;
            var phone = field.phone;
            var email = field.email;
            var imgurl = field.imgurl;
            var zt;
            // 显示填写结果，仅作演示用
            fetch('/admin/api/upuser.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: 'username=' + username + '&phone=' + phone + '&email=' + email + '&imgurl=' + imgurl
                })
                .then(response => response.json())
                .then(data => {
                    zt = data;
                    if (zt != 0) {
                        alert('修改成功!');
                        location.href = '/admin/userma.php';
                    } else {
                        alert('没有内容变动!');
                        location.href = '/admin/userma.php';
                    }
                })
                .catch(error => console.error(error));
            return false; // 阻止默认 form 跳转
        });
    });
</script>